<template>
  <div class="usercontent">
    <div class="usercontentheader">
      <div :class="[rechargestep == 1?'actived':'']" @click="rechargestep=1">网银充值</div>
      <div :class="[rechargestep == 2?'actived':'']" @click="rechargestep=2">微信充值</div>
      <div :class="[rechargestep == 3?'actived':'']" @click="rechargestep=3">充值明细</div>
    </div>
      <div class="banklogo" v-if="rechargestep == 1">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="amount">
        <span style="lineHeight:40px">充值金额 :</span>
        <el-input v-model="amount" placeholder="请输入充值金额" style="width:130px"></el-input>
        <br>
        <div style="width:208px;height:50px;backgroundColor:red">微信支付</div>
        <el-button type="primary" class="btn">充值</el-button>
        <p>单位元,最低充值100元</p>
      </div>
  </div>
</template>

<script>
export default {
  layout: "user",
  data() {
    return {
      amount: "",
      rechargestep:1,
    };
  }
};
</script>

<style scoped>
.banklogo {
  overflow: hidden;
  padding-top: 10px
}
.banklogo > div {
  width: 200px;
  height: 50px;
  margin: 30px 0 0 40px;
  background-color: red;
  float: left;
}
.amount {
  padding: 50px 0 70px 40px;
  font-size: 14px;
}
.amount > p {
  font-size: 12px;
  color: #888;
}
.btn {
  width: 205px;
  height: 40px;
  margin: 24px 0 10px 0;
}
</style>
